<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--潘天赐-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>
<div style="margin-left:px;margin-top:100px;width:1000px;height: 200px">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">条件查询</h3>
        </div>
        <div class="panel-body">
            <div style="display:inline-block;">
                <div style="float:left;padding:0px;">
                    <span>名称：</span>
                </div>
                <div style="float:left;">
                    <input id="productName" class="form-control" style="width:200px;"/>
                </div>
                <div style="float:left;margin-left:20px;">
                    <button id="save" class="btn btn-primary">查询</button>
                </div>
            </div>
        </div>
    </div>
    <table id="table"></table>
</div>

<table class="table" id="myTable"></table>

</body>
<script>
    $("#myTable").bootstrapTable({
        myDiv:'#myDiv',
        url:"queryMaterialsAll",
        queryParams:function(params){
            return {
                //新增业务字段
                productName:$("#productName").val(),
            };
        },
        columns:[
            {field:'productId',title:'编号'},
            {field:'productName',title:'材料单名称'},
            {field:'productCategory',title:'类型'},
            {field:'cz',title:'操作',
                formatter: function(value,row,index){
                    return '<button type="button" onclick="queryMaterials(\''+row.productId+'\',\''+row.productName+'\')" class="btn btn-link">查看</button>  '+
                        '<button type="button" onclick="redactMaterials(\''+row.productId+'\',\''+row.productName+'\')" class="btn btn-link">编辑</button>'
                }
            },
        ],
        pagination:true,			//是否展示分页
        pageNumber:1,				//当前页
        pageList:[1,3,5],			//分页组件
        sidePagination : 'client',	//分页方式：client客户端分页，server服务端分页
    })
    $('#save').click(function () {
        $('#myTable').bootstrapTable('refresh')
    })

    function queryMaterials(id,name){
        location.href="queryMaterialsShow?id="+id+"&name="+name
    }
    function redactMaterials(id,name){
        location.href="redactMaterials?id="+id+"&name="+name
    }


</script>
</html>